<template>
  <div class="nav">
    <swiper :options="swiperOption">
      <swiper-slide :key="index" v-for="(page,index) in reversedItems">
        <div class=item v-for="item in page">
          <div class="image"><img :src="item.icon" /></div>
          <div class="font" v-text="item.title"></div>
        </div>
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>

  </div>
</template>
<script>
export default{
  name: 'IndexNav',
  props: ['items'],
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination'
      }
    }
  },
  computed: {
    reversedItems () {
      const tempItems = []
      if (this.items.length > 1) {
        this.items.forEach(function (curren, index, array) {
          const arrayIndex = Math.floor(index / 8)
          if (!tempItems[arrayIndex]) {
            tempItems[arrayIndex] = []
          }
          tempItems[arrayIndex].push(curren)
        })
      }
      return tempItems
    }
  }
}
</script>

<style lang="stylus" scoped>
  .nav >>> .swiper-container
    overflow: visible
    .swiper-pagination-bullets
      bottom: -.2rem
      .swiper-pagination-bullet-active
        background: rgba(0,175,190,.8)
  .nav
    background-color: #ffffff
    height 0;
    padding-bottom 3.5rem
    padding-top: .1rem
    .item
      width: 25%
      text-align: center
      float: left;
      margin-bottom: .1rem
      .image
        img
          width: 1.1rem
      .font
        margin-top: .1rem
        color: #212121
</style>
